<template>
	<div :class="['list',danmuData.length > 0 ?'pt30':'', hasData ? 'hasData':'']">
		<!-- <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">   
        <div class="menu-container" ref="menuContainer">    
            这个是内容 
        </div>  
		</v-touch>-->
		<!-- 顶部弹幕 -->
		<topDanmu :dataObj="danmuData" v-if="danmuData.length > 0"></topDanmu>
		<!-- <betterScroll class="wrapper" :data="list" :pullup="true" :pulldown="true"  :startX="0" :scrollX="true"   @scrollToEnd="loadData" @pulldown="refresh"> -->
		<pullUpBox class="wrapper" :data="list" @loadMore="loadData">
			<div>
				<div class="top">
					<img src="../assets/images/img_bg@2x.png" alt class="bg">
					<img src="../assets/images/bg_rules@2x.png" class="rule" @click.self.stop="popRule">
				</div>

				<ul>
					<li v-for="(item,index) in list" :key="index" @click.stop="toShop(item.shopId,item.shopName)">
						<div class="col">
							<div class="shopIcon">
								<img v-lazy="item.shopIcon" alt>
								<div
									v-if="cartNum[item.shopId] && cartNum[item.shopId] > 0"
									class="horn"
								>{{cartNum[item.shopId]}}</div>
							</div>
							<div class="shopDes">
								<div class="shopDes-top">
									<div class="name">{{item.shopName}}</div>
									<div class="label">{{item.surplusTime}}</div>
								</div>
								<div class="subtitle">共{{item.goodsNumber}}件商品 卖出{{item.salesNumber}}个十元包裹</div>
							</div>
							<div class="btn">挑选商品</div>
						</div>
						<div class="goods_container">
							<!-- <betterScroll :data="list"   :startX="0" :scrollX="true" :scrollY="false" :click="true" :scrollRef="'x-wrapper'"  @scrollToEnd="loadData" @pulldown="refresh"> -->
							<div class="good" v-for="(good,count) in item.goodsList" :key="count">
								<div class="pic">
									<img v-lazy="good.goodsImage" alt>
								</div>
								<div class="title">{{good.goodsName}}</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</pullUpBox>
		<!-- </betterScroll> -->
		<rule :ruleShow="ruleShow"></rule>
		<msgBox :msgTxt="msgTxt"></msgBox>
	</div>
</template>

<script >
import { toShopDetail } from "./../assets/js/url.js";
import { shopList, danmuList } from "./../assets/js/api.js";
// import betterScroll from '@/components/betterScroll';
import pullUpBox from "@/components/pullUpBox";
import topDanmu from "@/components/topDanmu";
import msgBox from "@/components/msgBox";
import rule from "./rule";
import {
	getQueryString,
	shareToWxMini,
	fissile_getCart
} from "@/assets/js/common/utils";
import App from "@/assets/js/common/wap.app.js";

export default {
    name: "tenFairShopList",
    data() {
        return {
            page:1,  
            hasData:false,//页面无数据不显示，只显示加载loading  
            ruleShow:false,//规则  
            list: [],//店铺列表
            danmuData:[],//弹幕数据
            toShopDetail,
            isLoadData:true,//是否加载数据
            msgTxt: '',
            cartNum: {}, // 店铺有多少已加入购物车的商品件数
        };
    },
    watch: {
        $route(to,from){
            // console.log('change router');
            this.setCartData();
        }
    },
    created() {
        this.setCartData();
        this.getShopList();
        this.getDanmuData();
    },
    mounted () {
        //统计埋点
        let data = {
            code: 'TF0',
            query: {
                name: "十元五件集市",
            }
        }
        this.$tapConfig.batchClick(0,data,0)
    },
    methods: {
        //  设置购物车数据
        setCartData(){
            let userCart = fissile_getCart();
            if(Object.keys(userCart).length > 0 && userCart['tenFair']){
                let cartObj = userCart['tenFair'];
                for(var id in cartObj){
                    let _num = cartObj[id].num.split(',');
                    let _count = 0;
                    _num.map((item) => {
                        return _count += Number(item);
                    })
                    this.cartNum[id] = _count;
                }
            }
            // this.setCartNum();
        },
        //规则弹框
        popRule(){
            this.ruleShow=!this.ruleShow;
        },
        //跳转店铺
        toShop(shopId,shopName){
            let self=this;
            this.$router.push({
                path:self.toShopDetail +"/shop_id/"+ shopId+"/shop_name/"+encodeURI(shopName),

            })
        },
        //获取店铺列表
        getShopList(){
            this.$http.get(shopList,{
                params:{
                    page:this.page
                }
            }).then(res=>{
                // console.log(res.data.shopList)
                if(res.data.result==1){
                    this.hasData=true;
                    this.list=this.list.concat(res.data["shopList"]);
                    if(res.data["nextPage"]>1){
                        this.page=res.data["nextPage"];
                    }else{
                        return;
                    }
                }
                this.isLoadData=false;
            },err=>{})
        },
        //获取弹幕信息
        getDanmuData(){
            this.$http.get(danmuList).then(res=>{
                // console.log(res.data.shopList)
                if(res.data.result==1){
                    this.danmuData=res.data.items;
                }
            },err=>{})
        },
        onSwipeLeft(){
            alert(1)
        },
        onSwipeRight(){
            alert(2)

        },
        loadData() {
            if(!this.isLoadData){
                this.isLoadData=true;
                this.getShopList();
            }
        },
        refresh(){
            console.log('refresh')
            this.page = 1;
            this.list = [];
            this.getShopList();
        },
    },
    components: {
        // betterScroll,
        topDanmu,
        rule,
        msgBox,
        pullUpBox
    }
};
</script>

<style scoped lang="scss">
.wrapper {
	// height: 100%;
	// overflow-y: auto;
	// -webkit-overflow-scrolling: touch;
}
ul {
	list-style: none;
}
.list {
	width: 100%;
	opacity: 0;
	&.hasData {
		opacity: 1;
	}
	.top {
		width: 100%;
		position: relative;
		img {
			width: 100%;
			&.rule {
				position: absolute;
				top: 5px;
				right: 0;
				width: 74px;
			}
		}
	}
	ul {
		background: #f7f7f7;
		li {
			background: #fff;
			margin-bottom: 10px;
			.col {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 13px;
				.shopIcon {
					width: 43px;
					height: 43px;
					margin-right: 10px;
					position: relative;
					img {
						width: 100%;
					}
					.horn {
						position: absolute;
						top: -8px;
						right: -8px;
						width: 16px;
						height: 16px;
						line-height: 16px;
						border-radius: 100%;
						background: red;
						font-size: 11px;
						color: #ffffff;
						letter-spacing: 0;
						text-align: center;
					}
				}
				.shopDes {
					flex: 1;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					.shopDes-top {
						overflow: hidden;
						line-height: 20px;
						margin-bottom: 6px;
						-webkit-display: flex;
						display: flex;
						.name {
							// max-width: 65%;
							font-size: 15px;
							color: #333333;
							letter-spacing: 0;
							text-align: left;
							font-weight: bold;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							// float: left;
						}
						.label {
							// float: left;
							margin-left: 4px;
							background: #fff2ed;
							border-radius: 2px;
							font-size: 11px;
							color: #ff5a32;
							letter-spacing: 0;
							display: inline-block;
							padding: 0 8px;
							text-align: center;
						}
					}
					.subtitle {
						font-size: 12px;
						color: #999999;
						letter-spacing: 0;
						text-align: left;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.btn {
					width: 66px;
					height: 28px;
					margin-left: 10px;
					line-height: 28px;
					text-align: center;
					font-size: 12px;
					color: #fff;
					background-image: linear-gradient(
						-90deg,
						#f53917 0%,
						#ff8232 100%
					);
					border-radius: 3px;
				}
			}
			.goods_container {
				padding: 0 0 13px 13px;
				// width: 100%;
				margin-right: 13px;
				box-sizing: border-box;
				display: flex;
                overflow-x: scroll;
                -webkit-overflow-scrolling: touch;
				.good {
					width: 100px;
					margin-right: 6px;
					flex-shrink: 0;
                    overflow: hidden;
					.pic {
						width: 100px;
						height: 100px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 10px;
						img {
							width: 100%;
						}
					}
					.title {
                        height: 30px;
                        font-size: 14px;
                        line-height: 16px;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
}
.pt30 {
	padding-top: 30px;
}
</style>
